<template>
  <el-date-picker
      v-model="localValue"
      type="datetime"
      placeholder="请选择日期时间"
      value-format="YYYY-MM-DD HH:mm:ss"
      format="YYYY-MM-DD HH:mm:ss"
      :clearable="true"
      @change="handleChange"
  />
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

const props = defineProps<{
  modelValue: string | null
}>()

const emit = defineEmits(['update:modelValue', 'change'])

// 内部值
const localValue = ref<string | null>(props.modelValue ?? null)

// 监听外部赋值
watch(() => props.modelValue, (newVal) => {
  localValue.value = newVal || null
  console.log('外部赋值', newVal)
})

// change 事件处理
const handleChange = (value: string | null) => {
  emit('update:modelValue', value)
  emit('change', value)
}

</script>

<style scoped>
.el-date-editor {
  width: 100%;
}
</style>